要素

グラフの種類には各データセットのスタイルを構成するための設定が用意されていますが、場合によってはスタイルを設定したい場合があります。すべてのデータセットを同じ方法で。一般的な例は、棒グラフ内のすべての棒を同じ色で描画しますが、データセットごとに塗りつぶしを変更することです。オプションは 4 つの異なるタイプの要素に対して構成できます。アーク、行、ポイント、 と長方形。これらのオプションを設定すると、データセットにアタッチされた構成によって特にオーバーライドされない限り、そのタイプのすべてのオブジェクトに適用されます。

グローバル構成

要素のオプションは、チャートごとに指定することも、グローバルに指定することもできます。要素のグローバル オプションは次のように定義されます。Chart.defaults.global.elements。たとえば、すべての棒グラフの境界線の幅をグローバルに設定するには、次のようにします。

Chart.defaults.global.elements.rectangle.borderWidth = 2;

ポイント構成

ポイント要素は、折れ線グラフ、レーダー チャート、またはバブル チャート内のポイントを表すために使用されます。

グローバル ポイント オプション:Chart.defaults.global.elements.point。

名前 タイプ デフォルト 説明
radius number 3 ポイントの半径。
pointStyle string|Image 'circle' ポイントスタイル。
rotation number 0 点の回転 (度単位)。
backgroundColor Color 'rgba(0, 0, 0, 0.1)' ポイントの塗りつぶしの色。
borderWidth number 1 ポイントのストローク幅。
borderColor Color 'rgba(0, 0, 0, 0.1)' ポイントストロークの色。
hitRadius number 1 ヒット検出のためにポイント半径に追加の半径が追加されました。
hoverRadius number 4 ホバー時のポイントの半径。
hoverBorderWidth number 1 ホバー時のストローク幅。

ポイントスタイル

次の値がサポートされています。

  • 'circle'
  • 'cross'
  • 'crossRot'
  • 'dash'
  • 'line'
  • 'rect'
  • 'rectRounded'
  • 'rectRot'
  • 'star'
  • 'triangle'

値が画像の場合、その画像は次を使用してキャンバス上に描画されます。描画イメージ。

回線構成

線要素は、折れ線グラフの線を表すために使用されます。

グローバル回線オプション:Chart.defaults.global.elements.line。

名前 タイプ デフォルト 説明
tension number 0.4 ベジェ曲線張力 (0ベジェ曲線がない場合)。
backgroundColor Color 'rgba(0, 0, 0, 0.1)' 線の塗りつぶしの色。
borderWidth number 3 線のストロークの幅。
borderColor Color 'rgba(0, 0, 0, 0.1)' 線のストロークの色。
borderCapStyle string 'butt' ラインキャップスタイル。見るMDN。
borderDash number[] [] ラインダッシュ。見るMDN。
borderDashOffset number 0.0 破線のオフセット。見るMDN。
borderJoinStyle string 'miter' 線結合スタイル。見るMDN。
capBezierPoints boolean true trueベジェ制御をチャート内に維持するため、false制限はありません。
cubicInterpolationMode string 'default' 適用する補間モード。続きを見る...
fill boolean|string true 線の下の領域を埋める方法。見る面グラフ。
stepped boolean false true線を階段状の線として表示するには (tension無視されます)。

長方形の構成

四角形要素は、棒グラフの棒を表すために使用されます。

グローバル四角形オプション:Chart.defaults.global.elements.rectangle。

名前 タイプ デフォルト 説明
backgroundColor Color 'rgba(0, 0, 0, 0.1)' バーの塗りつぶしの色。
borderWidth number 0 バーのストローク幅。
borderColor Color 'rgba(0, 0, 0, 0.1)' バーのストロークの色。
borderSkipped string 'bottom' スキップされた (除外された) 境界線:'bottom'、'left'、'top'また'right'。

アーク構成

円弧は極地、ドーナツ、円グラフで使用されます。

グローバル円弧オプション:Chart.defaults.global.elements.arc。

名前 タイプ デフォルト 説明
angle- 極性のみ number circumference / (arc count) カバーする円弧の角度。
backgroundColor Color 'rgba(0, 0, 0, 0.1)' 円弧の塗りつぶしの色。
borderAlign string 'center' 円弧ストロークの位置合わせ。
borderColor Color '#fff' 円弧のストロークの色。
borderWidth number 2 円弧のストローク幅。

「」と一致する結果」

    「」に一致する結果はありません」